<template>
	<statusBarVue title="个人中心" :isShowBar="true" :isMyBgi="true" />
	<view class="my-page" :style="pageHaveBarStyle">
		<view class="my-page-header">
			<view class="header-text">
				<view class="user" @click="goToPage('/myPages/personal/index')">
					<img :src="userInfo.avatar" class="head-img" />
					<view class="user-info">
						<view class="name">{{ userInfo.nick }}</view>
						<view class="vip-bg">
							<text>VIP1</text>
						</view>
					</view>
				</view>
				<view class="rt">
					<view class="points" @click="goToPage('/myPages/ucoin/ucoin')">
						<icon class="icon icon-gold"></icon>
						<text>我的积分 8493</text>
					</view>
				</view>
			</view>
			<view class="nums">
				<view class="num">
					<view>8</view>
					<view class="label">参与的任务</view>
				</view>
				<view class="num">
					<view>2</view>
					<view class="label">速配任务</view>
				</view>
				<view class="num">
					<view>4</view>
					<view class="label">收藏的任务</view>
				</view>
				<view class="num">
					<view>1</view>
					<view class="label">我的足迹</view>
				</view>
			</view>
		</view>
		<view class="scroll-view-group">
			<scroll-view enable-back-to-top scroll-y
				:style="{ height: 'calc(' + pageHeighthaveBar + 'px - 137px - 15px - 10px)' }">
				<view class="group apps">
					<view class="tit">个人应用</view>
					<view class="btns">
						<view class="btn" v-for="(v, i) in applyListArr" :key="'apply-' + i" @click="goToPage(v.url)">
							<icon :class="'icon icon-' + v.iconClass"></icon>
							<view>{{ v.name }}</view>
						</view>
					</view>
				</view>

				<view class="group my-organize">
					<view class="company" @click="goToPage('/myPages/company/index')">
						<icon class="icon icon-company"></icon>
						<text>我的公司</text>
					</view>
					<view class="cut"></view>
					<view class="project" @click="goToPage('/myPages/project/editor')">
						<icon class="icon icon-project"></icon>
						<text>我的项目</text>
					</view>
				</view>

				<view class="group more">
					<view class="tit">小助手</view>
					<view class="list-btns">
						<uni-list :border="false">
							<!-- goToPage(item.url) -->
							<uni-list-item v-for="(item, index) in urlListArr" :key="'list-i-' + index" showArrow
								:border="false" thumb="/static/images/icon/23.png" :title="item.name" clickable
								@click="goToPage(item.url)">
							</uni-list-item>
						</uni-list>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import statusBarVue from '@/components/statusBar.vue'

	import {
		getWechatToken,
		getPhone,
		getCheckExists,
		postAddRegister
	} from "@/utils/api"

	import {
		publics
	} from '@/mixins/publics.js';

	import {
		getEditProducts
	} from '@/utils/api.js';

	export default {
		mixins: [publics],
		components: {
			statusBarVue
		},
		data() {
			const _token = uni.getStorageSync("_token");

			return {
				userInfo: {},
				applyListArr: [{
						name: '技能管理',
						iconClass: 'jn',
						url: '/myPages/skills/index',
					},
					{
						name: '我的证书',
						iconClass: 'zs',
						url: '/myPages/documents/index',
					},
					{
						name: '我的收藏',
						iconClass: 'sc',
						url: '/myPages/favorites/index',
					},
					{
						name: '我的评价',
						iconClass: 'pj',
						url: '',
					},
					{
						name: '任务推广',
						iconClass: 'rw',
						url: '/myPages/task/promotion',
					},
					{
						name: '我的公益',
						iconClass: 'gy',
						// url: `https://shuidianbang.net/web_app/public_welfare?auth=${_token}`
						url: '/myPages/publicWelfare/index',
					},
					{
						name: '我的卡片',
						iconClass: 'bank-card',
						url: '/myPages/bankcards/index',
					},
					{
						name: '接单偏好',
						iconClass: 'order',
						url: '/myPages/order/index',
					}
				],
				urlListArr: [{
					name: '邀请得豆',
					url: '/myPages/ucoin/ucoin'
				}, {
					name: '商家入驻',
					// url: '/myPages/merchant/settled',
					url: 'https://shuidianbang.net/web_app/page/SIR.html',
				}, {
					name: '商户服务',
					// url: '/myPages/merchant/service'
					url: 'https://shuidianbang.net/web_app/page/MCS.html'
				}, {
					name: '使用帮助',
					// url: '/myPages/help/index',
					url: 'https://shuidianbang.net/web_app/page/UGG.html',
				}, {
					name: '设置',
					url: '/myPages/personal/index'
				}],
				current: 0
			};
		},
		onShareAppMessage(){
			// 监听用户右上角的转发
		},
		onShareTimeline(){
			// 监听用户右上角的分享到朋友圈
		},
		onShow() {
			this.getEditProductsApi();
		},
		methods: {
			getEditProductsApi() {
				getEditProducts().then(res => {
					if (res.code === 200) {
						const _userInfo = res.data.user;
						uni.setStorageSync(
							'_userInfo',
							_userInfo
						);
						this.userInfo = _userInfo;
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.my-page {
		position: fixed;
		left: 0;
		right: 0;
		z-index: 99;

		.my-page-header {
			color: #fff;
			margin-bottom: 15px;

			.header-text {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 16rpx 0 39rpx 28rpx;


				.user {
					display: flex;
					align-items: center;
					justify-content: flex-start;

					&+.rt {
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.head-img {
						width: 62px;
						height: 62px;
						border: 2rpx solid #fff;
						border-radius: 50%;
						margin-right: 18px;
					}

					.user-info {
						.name {
							margin-bottom: 8px;
						}

						.vip-bg {
							width: 70px;
							height: 22px;
							line-height: 22px;
							text-align: center;
							font-family: PingFangSC-SNaNpxibold;
							font-size: 12px;
							background: url("/static/images/vip.png") no-repeat 0 0;
							background-size: 100% 100%;

							&>text {
								margin-left: 14px;
							}
						}
					}
				}

				.points {
					width: 120px;
					height: 20px;
					background: rgba(254, 245, 230, 0.6);
					border: 1px solid #FFFFFF;
					border-radius: 10px;
					text-align: center;
					font-family: PingFangSC-Regular;
					font-weight: 400;
					font-size: 12px;
					color: #FE9F41;
					padding: 1.5rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: space-around;

					.icon-gold {
						width: 15.03px;
						height: 15px;
						background-image: linear-gradient(180deg, #FEE9B3 0%, #FE8E15 100%);
						border-radius: 100%;
					}
				}
			}

			.nums {
				display: flex;
				justify-content: space-between;
				text-align: center;
				font-family: DINAlternate-Bold;
				font-weight: 700;
				color: #fff;
				font-size: 40rpx;
				letter-spacing: 0;


				.label {
					height: 40rpx;
					font-family: PingFangSC-Regular;
					font-weight: 400;
					font-size: 28rpx;
					color: #fff;
					text-align: center;
					letter-spacing: 1.2;
				}
			}
		}

		.nums,
		.group {
			width: 94.67vw;
			margin: auto;
		}

		.group {
			background-color: #fff;
			border-radius: 20rpx;
			margin-bottom: 21.04rpx;
			padding: 24rpx;
			box-sizing: border-box;
		}

		.apps {
			height: auto;

			.tit {
				height: 44rpx;
				font-family: PingFangSC-Semibold;
				font-weight: 600;
				font-size: 32rpx;
				color: #181818;
			}

			.btns {
				display: flex;
				flex-wrap: wrap;
				color: #000;
				padding-left: calc(38rpx - 24rpx);
				padding-right: calc(38rpx - 24rpx);
				padding-bottom: calc(36.96rpx - 24rpx);
				justify-content: space-between;

				&>.btn {
					width: 21.003%;
					text-align: center;
					margin-top: 36rpx;
					font-family: PingFangSC-Regular;
					font-weight: 400;
					font-size: 26rpx;
					color: #1E1F23;

					.icon {
						width: 26px;
						height: 26px;
						margin: auto;

						&-jn {
							background: url("/static/images/icon/13.png") no-repeat 0 0;
							background-size: 100% 100%;
						}

						&-zs {
							background: url("/static/images/icon/14.png") no-repeat 0 0;
							background-size: 100% 100%;
						}

						&-sc {
							background: url("/static/images/icon/3.png") no-repeat 0 0;
							background-size: 100% 100%;
						}

						&-pj {
							background: url("/static/images/icon/17.png") no-repeat 0 0;
							background-size: 100% 100%;
						}

						&-rw {
							background: url("/static/images/icon/19.png") no-repeat 0 0;
							background-size: 100% 100%;
						}

						&-gy {
							background: url("/static/images/icon/18.png") no-repeat 0 0;
							background-size: 100% 100%;
						}

						&-bank-card {
							background: url("/static/images/icon/bank_card.png") no-repeat 0 0;
							background-size: 100% 100%;
						}

						&-order {
							background: url("/static/images/icon/order.png") no-repeat 0 0;
							background-size: 100% 100%;
						}
					}
				}
			}
		}

		.my-organize {
			font-family: PingFangSC-Regular;
			font-weight: bold;
			font-size: 14px;
			color: #696969;
			display: flex;
			justify-content: space-evenly;
			align-items: center;

			&>view {
				display: flex;
			}

			.cut {
				width: 1rpx;
				height: 26px;
				background-color: #979797;
			}

			.icon {
				width: 22px;
				height: 22px;
				margin-right: 12px;

				&+text {
					vertical-align: top;
				}

				&-company {
					background: url("/static/images/icon/9.png") no-repeat 0 0;
					background-size: 100% 100%;
				}

				&-project {
					background: url("/static/images/icon/11.png") no-repeat 0 0;
					background-size: 100% 100%;
				}
			}
		}

		.more {
			font-weight: bold;

			.tit {
				margin-bottom: 12px;
			}

			.uni-list-item__icon {
				margin-right: 0;

				.uni-list-item__icon-img {
					width: 20px;
					height: 20px;
					margin-right: 8px;
				}
			}
		}

		.btn-login {
			padding: 0;
			background-color: #22a366;
			color: #fff;
			border-radius: 0;
		}
	}
</style>